<template>
  <div class="daily">
    <div class="header">
      <div class="titleBar">
        <div class="information">
          <div class="avatar">
            <img src="https://t7.baidu.com/it/u=128764686,1887614532&fm=193&f=GIF" alt="">
          </div>
          <div class="message">
            <div class="message-title">记录我的日常</div>
            <div class="message-detail">还没有记录</div>
          </div>
        </div>
        <div class="close" @click="prev">
          <img src="../assets/close.png" alt="">
        </div>
      </div>
      
      <!-- 滑动之前 -->
      <div class="classification-before" v-if="headerScroll">
        <div class="sortBlock-big">
          <div class="leftBig">
            <p class="beforeText">语音</p>
          </div>
          <div class="rightBig">
            <p class="beforeText">日签</p>
          </div>
        </div>
        <div class="sortBlock-small">
          <div class="leftSmall">
            <p class="beforeText">打卡</p>
          </div>
          <div class="middleSmall">
            <p class="beforeText">文字</p>
          </div>
          <div class="rightSmall">
            <p class="beforeText">拍摄</p>
          </div>

        </div>
      </div>

      <!-- 滑动之后 -->
      <div class="classification-after" v-else>
        <div class="sortBlock">
          <div class="picture first">
            <img src="../assets/yuyin.png" alt="">
          </div>
          <div class="afterText">语音</div>
        </div>

        <div class="sortBlock">
          <div class="picture second">
            <img src="../assets/1.png" alt="">
          </div>
          <div class="afterText">日签</div>
        </div>

        <div class="sortBlock">
          <div class="picture third">
            <img src="../assets/gou.png" alt="">
          </div>
          <div class="afterText">打卡</div>
        </div>

        <div class="sortBlock">
          <div class="picture forth">
            <img src="../assets/t.png" alt="">
          </div>
          <div class="afterText">文字</div>
        </div>

        <div class="sortBlock">
          <div class="picture fifth">
            <img src="../assets/paishe.png" alt="">
          </div>
          <div class="afterText">拍摄</div>
        </div>

      </div>
    </div>
    

    <DailyScrollBar/>
    

   


  </div>
</template>

<script>
import { useRouter } from 'vue-router'
import { reactive, toRefs } from '@vue/reactivity'
import { nextTick } from 'vue'

import DailyScrollBar from '../components/DailyScrollBar.vue'

export default {
  components: {
    'DailyScrollBar': DailyScrollBar
  },
  setup() {
    const router = useRouter()


    const state = reactive({
      headerScroll: true
    })

    // 返回上一级
    const prev = () => {
      // 退出页面，移除监听器
      window.removeEventListener('scroll', () => {
        let scrollTop =  window.pageYOffset 
        state.headerScroll = scrollTop > 10 ? false : true
      }, true)
      router.go(-1)
    }

    // 监听页面滚动  --- 页面加载完成才执行
    nextTick(() => {
      window.addEventListener('scroll', () => {
        let scrollTop =  window.pageYOffset 
        // console.log(scrollTop);
        state.headerScroll = scrollTop > 10 ? false : true

      }, false)
      
    })



    return {
      ...toRefs(state),
      prev
    }
  },
  
}



</script>

<style scoped>
.daily{
  width: 100%;
  height: 100%;
  min-height: 100vh;
  background: #000;
  position: relative;
}
.header{

  width: 100%;
  position: fixed;
  top: 0;
  background: #000;

}
.titleBar{
  display: flex;
  width: 100%;
  height: 90px;
  padding: 20px 10px;
  box-sizing: border-box;
  /* background: rgb(216, 0, 0); */
  justify-content: space-between;
}
.information{
  width: 55%;
  height: 100%;
  display: flex;
}
.avatar{
  width: 50px;
  height: 50px;
  border-radius: 50%;
  /* background-color: rgb(30, 13, 180); */
}
.avatar img{
  width: 100%;
}
.message{
  width: 65%;
  margin: 5px 10px;
}
.message-title{
  color: #fff;
  font-weight: bold;
  font-size: 17px;
  letter-spacing: 1px;
  margin-bottom: 10px;

}
.message-detail{
  font-size: 13px;
  color: rgb(92, 92, 92);
}
.close{
  width: 30px;
  height: 30px;
  
}
.close img{
  width: 30px;
  height: 30px;
  color: #fff;
} 

.classification-before,
.classification-after{
  width: 100%;
  height: fit-content;
  padding: 0px 10px;
  box-sizing: border-box;
}
.sortBlock-big,
.sortBlock-small{
  display: flex;
  margin: 0;
  width: 100%;
  justify-content: space-between;
  color: #fff;

}
.leftBig,
.rightBig{
  width: 49%;
  height: 85px;
  border-radius: 10px;
}
.leftBig,
.picture.first{
  background: linear-gradient(to bottom right, rgb(241, 103, 23), rgb(250, 191, 123));
}
.rightBig,
.picture.second{
  background: linear-gradient(to bottom right, rgb(122, 240, 19), rgb(217, 250, 164));
}
.leftSmall,
.middleSmall,
.rightSmall{
  width: 32%;
  height: 85px;
  border-radius: 10px;
}
.sortBlock-small{
  margin-top: 8px;
}
.leftSmall,
.picture.third{
  background: linear-gradient(to bottom right, rgb(2, 148, 245), rgb(181, 241, 251));
}
.middleSmall,
.picture.forth{
  background: linear-gradient(to bottom right, rgb(243, 30, 94), rgb(250, 157, 185));
}
.rightSmall,
.picture.fifth{
  background: linear-gradient(to bottom right, rgb(156, 24, 245), rgb(222, 183, 248));
}
.beforeText{
  display: inline-block;
  width: 40px;
  height: 40px;
  margin: 14px 18px;
  font-size: 18px;
  letter-spacing: 1px;
  font-weight: bolder;
}


.classification-after{
  display: flex;
  justify-content: space-between;
}
.sortBlock{
  width: 17%;
  height: 100px;
}
.picture{
  width: 100%;
  height: 60px;
  border-radius: 13px;
  overflow: hidden;
  text-align: center;
}
.picture img{
  margin-top: 7px;
  width: 80%;
}
.afterText{
  width: 100%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  letter-spacing: 1px;
  color: #fff;
}


</style>